<template>
	<!-- 富同精英 -->
	<view>
		<view class="ss">
			<view class="input">
				<image class="img1" src="../../static/Home/ss.png" mode=""></image>
				<view class="box">
					<input type="text" value="" placeholder="选择富同精英" />
				</view>
				<view class="sub">
					搜索
				</view>
			</view>
		</view>
		
		<!--  -->
		<view class="row1">
			<view class="title">
					富同精英
			</view>
			<view class="ul">
				<view class="li" v-for="(itme,index) in 4" :key='index'>
					<view class="image">
						<image class="img1" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="msg">
						<view class="top">
							<view class="txt">
								<view class="txt1">
									<view class="name">
										张三
									</view>
									<view class="span">
										上海
									</view>
								</view>
								<view class="num">
									工号：201400
								</view>
							</view>
							<view class="look"@click="router">
								查看
							</view>
						</view>
						<view class="bottom">
							简介：专业从事房地产行业数十年，拥有丰富经验...
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			router(){
				uni.navigateTo({
					url:'./futongDetail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.ss{
		width: 100%;
		height: 84rpx;
		background-color: #fff;
		display: flex;
		margin-top: 20rpx;
		.input{
			display: flex;
			margin: auto;
			width: 80%;
			height: 60rpx;
			border-radius: 5px 5px 5px 5px;
			background-color: rgba(242, 242, 242, 67);
			.img1{
				width: 30rpx;
				height: 26rpx;
				margin: 20rpx 10rpx;
			}
			.box{
				width: 450rpx;
			}
			text{
			}
			input{
				font-size: 28rpx;
				height:  60rpx;
			}
		}
		.sub{
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 5px 5px 5px 5px;
			background-color: rgba(255, 149, 0, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 14px;
			border: 1px solid rgba(255, 255, 255, 100);
			text-align: center;
		}
	}
	
	.row1 {
		padding-top: 30rpx;
		margin: 20rpx auto;
		background-color: #F5F5F5;
		padding-bottom: 100rpx;
		border-radius: 25rpx 25rpx 0 0;
		.title {
			width: 90%;
			margin: auto;
			color: rgba(51, 51, 51, 100);
			font-size: 36rpx;
			text-align: left;
			font-weight: 550;
	
		
		}
	
		.ul {
			width: 90%;
			margin: auto;
			margin-top: 30rpx;
			border-radius: 15rpx;
			background-color: #fff;
			.li {
				display: flex;
	
				.image {
					width: 30%;
					padding: 30rpx;
	
					.img1 {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
					}
				}
	
				.msg {
					width: 70%;
					padding: 20rpx;
					.top {
						display: flex;
						justify-content: space-between;
						.look{
							margin-top: 10rpx;
							width: 128rpx;
							height: 55rpx;
							line-height: 55rpx;
							border-radius: 28rpx;
							background-color: rgba(255, 196, 91, 100);
							color: rgba(16, 16, 16, 100);
							font-size: 28rpx;
							text-align: center;
							font-family: Arial;
							border: 1px solid rgba(255, 255, 255, 100);
						}
					}
					.bottom{
						margin-top: 10rpx;
						color: #bfbfbf;
						font-size: 28rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
					}
					.txt {
						.txt1 {
							display: flex;
	
							.name {
								font-weight: 550;
							}
	
							.span {
								font-size: 28rpx;
								color: #999999;
								margin-left: 10rpx;
							}
						}
	
						.num {
							margin-top: 10rpx;
							color: #999;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
